<%@ Page Title="" Language="C#" MasterPageFile="~/TitleLayout.master"  %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" runat="Server">
    <div style="margin-bottom: 10px;">
        <asp:Image ID="Image3" runat="server" ImageUrl="~/Droppable/Images/ui_text_droppable.gif">
        </asp:Image></div>
    <DotNetAge:Accordion ID="Accordion1" runat="server" SkinID="Black-Ice" Animated="bounceslide">
        <Views>
            <DotNetAge:NavView ID="Nav1" runat="server" Text="Feature Examples" Target="demoFrame">
                <Items>
                    <DotNetAge:NavItem Text="Core Features" NavigateUrl="~/Droppable/Core.aspx" />
                    <DotNetAge:NavItem Text="Accepted Elements" NavigateUrl="~/Droppable/AcceptedElements.aspx" />
                    <DotNetAge:NavItem Text="Prevent propagation" NavigateUrl="~/Droppable/PreventPropagation.aspx" />
                    <DotNetAge:NavItem Text="Visual feedback" NavigateUrl="~/Droppable/VisualFeedback.aspx" />
                    <DotNetAge:NavItem Text="Revert draggable position" NavigateUrl="~/Droppable/Revert.aspx" />
                    <DotNetAge:NavItem Text="Simple photo manager" NavigateUrl="~/Droppable/SimplePhotoManager.aspx" />
              <DotNetAge:NavItem Text="Programmatic creation" NavigateUrl="~/Droppable/ProgrammaticCreation.aspx" />
                </Items>
            </DotNetAge:NavView>
        </Views>
    </DotNetAge:Accordion>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MiddleContent" runat="Server">
    <iframe frameborder="0" style="height: 560px; width: 100%" name="demoFrame" scrolling="no"
        src="Core.aspx"></iframe>
    <DotNetAge:Tabs ID="Tabs1" runat="server">
        <Views>
            <DotNetAge:View Text="Overview" runat="server" ID="overView">
         <p> Droppable is a ASP.NET WebControl that encapsulat the jQuery UI droppable
     plugin.Droppable Web Control implement all functions of jQuery UI droppable
       plugin,it makes droppable plugin not only apply to client elements but also APS.NET
        WebControls.That is a easy way to using jQuery UI droppable plugin on
      ASP.NET.</p>
          <p>  You can specify which (individually) or which kind of draggables each will accept.
         All ClientEvents (OnClient... properties)receive two arguments(it's same of jQuery
         droppable callbacks):</p>   
         <p>The original browser event and a prepared ui object, view below for a
         documentation of this object (if you name your second argument 'ui'):</p>
     	<ul>
     		<li>ui.draggable - current draggable element, a jQuery object.</li>
     		<li>ui.helper - current draggable helper, a jQuery object</li>
     		<li>ui.position - current position of the draggable helper { top: , left: }</li>
     		<li>ui.offset - current absolute position of the draggable helper { top: ,left: }</li>
     	</ul>
            </DotNetAge:View>
            <DotNetAge:View Text="Properties" runat="server" ID="propertyView">   
            <p>
                    The Droppable control is initialized with this code</p>
                    <div style="border: 1px dashed #808080;">
                    <demo:Code runat="server" ID="quickDemo">
                        <CodeTemplate>
             
  <DotNetAge:Droppable
      ID="MyDroppable" 
      ActiveCssClass="ui-state-active"
      HoverCssClass="ui-state-highlight"
      Cursor="pointer"
      CursorAt="left:50"
      Container="Parent"
      AllowAddClasses="True"
      Greedy="Flase"
      AutoScroll="True"
      ScrollSpeed="100"
      ScrollSensitivity="50"
      DragHelperOpacity="0.5"
      ZIndex="1000"
      SnapX="50"
      SnapY="50"
      DragGroupName="dropGroup"
      Tolerance="Intersect"
      DragStartDelay="1000"
      DragStartDistance="50"
      DragHelper="Clone"
      Orientation="Both"
      OnClientDragActive="javascript/jQuery script like this:$(this).val();do sth ..."
      OnClientDragDeactive="..." 
      OnClientDragOver="..."
      OnClientDragOut="..."
      OnClientDrop="..."
  >
       <Target Selector="jQuery selector 
                TargetID="ServerControlID"
                TargetIDs="ControlID1,...,ControlIDn" />
       <Accept  />
      <Containsin  />
      <DragHandler  />
      <DisableDraggingElements  />
 <DotNetAge:Droppable>
     </CodeTemplate>
     </demo:Code></div>
            </DotNetAge:View>
        </Views>
    </DotNetAge:Tabs>
</asp:Content>
